<template>
  <div id="app">
    <div id="echart_map" ref="echart_map"></div>
  </div>
</template>

<script>
  import {eventBus} from "../../../assets/Bus";
  import $ from 'jquery';
  export default {
    data() {
      return {
        myChart: null,
      };
    },
    mounted() {
      this.showScatterInGeo(this.cityCode);
      // this.clickGoNext();
    },
    methods: {

      showScatterInGeo() {

        var ROOT_PATH =
          'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

        // var chartDom = document.getElementById('echart_map');
        // var myChart = echarts.init(chartDom);


        this.myChart = this.$echarts.init(this.$refs.echart_map);
        // this.$echarts.registerMap("china", chinamap);
        $.get(ROOT_PATH + '/data/asset/data/hangzhou-tracks.json', function (data) {
          const lines = data.map(function (track) {
            return {
              coords: track.map(function (seg, idx) {
                return seg.coord;
              })
            };
          });
          var option = {
            title: {
              text: '感染者隔离前一周出行轨迹'
            },
            bmap: {
              center: [120.13066322374, 30.240018034923],
              zoom: 14,
              roam: true,
              mapStyle: {
                styleJson: [
                  {
                    featureType: 'water',
                    elementType: 'all',
                    stylers: {
                      color: '#d1d1d1'
                    }
                  },
                  {
                    featureType: 'land',
                    elementType: 'all',
                    stylers: {
                      color: '#f3f3f3'
                    }
                  },
                  {
                    featureType: 'railway',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off'
                    }
                  },
                  {
                    featureType: 'highway',
                    elementType: 'all',
                    stylers: {
                      color: '#fdfdfd'
                    }
                  },
                  {
                    featureType: 'highway',
                    elementType: 'labels',
                    stylers: {
                      visibility: 'off'
                    }
                  },
                  {
                    featureType: 'arterial',
                    elementType: 'geometry',
                    stylers: {
                      color: '#fefefe'
                    }
                  },
                  {
                    featureType: 'arterial',
                    elementType: 'geometry.fill',
                    stylers: {
                      color: '#fefefe'
                    }
                  },
                  {
                    featureType: 'poi',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off'
                    }
                  },
                  {
                    featureType: 'green',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off'
                    }
                  },
                  {
                    featureType: 'subway',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off'
                    }
                  },
                  {
                    featureType: 'manmade',
                    elementType: 'all',
                    stylers: {
                      color: '#d1d1d1'
                    }
                  },
                  {
                    featureType: 'local',
                    elementType: 'all',
                    stylers: {
                      color: '#d1d1d1'
                    }
                  },
                  {
                    featureType: 'arterial',
                    elementType: 'labels',
                    stylers: {
                      visibility: 'off'
                    }
                  },
                  {
                    featureType: 'boundary',
                    elementType: 'all',
                    stylers: {
                      color: '#fefefe'
                    }
                  },
                  {
                    featureType: 'building',
                    elementType: 'all',
                    stylers: {
                      color: '#d1d1d1'
                    }
                  },
                  {
                    featureType: 'label',
                    elementType: 'labels.text.fill',
                    stylers: {
                      color: '#999999'
                    }
                  }
                ]
              }
            },
            series: [
              {
                type: 'lines',
                coordinateSystem: 'bmap',
                data: lines,
                polyline: true,
                lineStyle: {
                  color: 'purple',
                  opacity: 0.6,
                  width: 1
                }
              }
            ]
          }
          // this.myChart.setOption(
          //   ()
          // );
          this.myChart.setOption(this.option);
        });

      },

      // clickGoNext() {
      //   var that = this;
      //   var dataList = that.$echarts.getMap("china").geoJson.features;
      //   // console.log("dataList:", dataList);
      //   // 鼠标事件
      //   this.myChart.on("click", function (res) {
      //     eventBus.$emit("getEchartMapData", res)
      //     console.log("click city:", res.name);
      //     dataList.forEach((element) => {
      //       if (element.properties.name == res.name) {
      //         console.log("city code:", element.id);
      //       }
      //     });
      //   });
      // },
    },
  };
</script>

<style scoped>
  #echart_map {
    width: 100%;
    height: 500px;
    background-color: #f1f3f4;
  }
</style>
